// H5端资讯页面 - 红色主题
import React from 'react'
import { Card } from 'konsta/react'
import { TrendingUp, Clock } from 'lucide-react'
import designSystem from '../styles/colors'

const MarketPage = () => {
  // 占位资讯数据
  const newsItems = [
    { title: '金融市场最新动态', time: '2小时前', category: '市场' },
    { title: '投资理财技巧分享', time: '5小时前', category: '理财' },
    { title: '数字货币行情分析', time: '1天前', category: '行情' },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 via-orange-50 to-red-100">
      {/* 顶部标题区域 */}
      <div 
        className="relative p-6 pb-8 rounded-b-3xl shadow-lg"
        style={{ background: designSystem.gradients.primary }}
      >
        <h1 className="text-2xl font-bold text-white">资讯中心</h1>
        <p className="text-white/80 text-sm mt-1">获取最新金融资讯</p>
      </div>

      {/* 资讯列表 */}
      <div className="p-4 -mt-4 space-y-3">
        {newsItems.map((item, index) => (
          <Card key={index} className="!bg-white shadow-md border-0">
            <div className="p-4">
              <div className="flex items-start justify-between mb-2">
                <span className="text-xs font-semibold text-red-500 bg-red-50 px-2 py-1 rounded">
                  {item.category}
                </span>
                <div className="flex items-center text-gray-400 text-xs">
                  <Clock size={12} className="mr-1" />
                  {item.time}
                </div>
              </div>
              <h3 className="text-gray-800 font-medium mb-2">{item.title}</h3>
              <div className="flex items-center text-gray-500 text-xs">
                <TrendingUp size={14} className="mr-1 text-red-500" />
                <span>热度上升中</span>
              </div>
            </div>
          </Card>
        ))}

        {/* 占位提示 */}
        <div className="flex items-center justify-center py-12 text-gray-400">
          <p className="text-center text-sm">
            更多资讯内容
            <br />
            <span className="text-xs">待组员实现</span>
          </p>
        </div>
      </div>
    </div>
  )
}

export default MarketPage

